<template>
  <view class="tree-node">
    <template v-for="(node, index) in nodes" :key="node.key">
      <view class="node-item" :style="{ paddingLeft: depth * 24 + 'px' }">
        <!-- 节点内容 -->
        <view class="node-content" @click.stop="handleNodeClick(node)">
          <!-- 展开/折叠图标 -->
          <view 
            class="toggle-icon" 
            v-if="node.children && node.children.length"
            @click.stop="handleToggle(node.key)"
          >
            <uni-icons 
              type="right" 
              size="16" 
              color="#666"
              :class="{ 'rotate-90': node.expanded }"
            />
          </view>
          <view class="toggle-icon" v-else></view>
          
          <!-- 节点图标 -->
          <uni-icons 
            type="folder-open" 
            size="18" 
            color="#409eff"
            v-if="node.children && node.children.length"
          />
          <uni-icons 
            type="document" 
            size="18" 
            color="#666"
            v-else
          />
          
          <!-- 节点文本 -->
          <text 
            class="node-label"
            :class="{ 
              'node-selected': selectedKey === node.key,
              'has-children': node.children && node.children.length
            }"
          >
            {{ node.label }}
          </text>
        </view>
        
        <!-- 递归渲染子节点 -->
        <view 
          class="children-nodes"
          v-if="node.children && node.children.length && node.expanded"
          :style="{ animationDuration: '0.2s' }"
        >
          <tree-comp
            :nodes="node.children" 
            :depth="depth + 1"
            :selected-key="selectedKey"
            @toggle="handleToggle(node.key)"
            @select="handleNodeClick(node.key)"
          />
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义属性
const props = defineProps({
  nodes: {
    type: Array,
    required: true,
    default: () => []
  },
  depth: {
    type: Number,
    default: 0
  },
  selectedKey: {
    type: String,
    default: ''
  }
});

// 定义事件
const emit = defineEmits(['toggle', 'select']);

// 处理展开/折叠
const handleToggle = (key) => {
  emit('toggle', key);
};

const handleSelect = (node)=> {
  emit('select', node)
}

// 处理节点点击选中
const handleNodeClick = (node) => {
  emit('select', node.key);
};
</script>

<style scoped>
.tree-node {
  width: 100%;
}

.node-item {
  transition: all 0.2s ease;
}

.node-content {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 4px;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.node-content:hover {
  background-color: #eef2f7;
}

.toggle-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.rotate-90 {
  transform: rotate(90deg);
}

.node-label {
  margin-left: 8px;
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease;
}

.node-selected {
  color: #409eff;
  font-weight: 500;
}

.has-children {
  color: #1f2329;
}

.children-nodes {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
